<template>
  <div class="score-page">
    <g-empty v-if="!loading && list.length === 0" />
    <template v-else>
      <score-card v-for="item in list" :key="item.id" :data="item" />
      <div v-if="finished" class="g-divider">没有更多了</div>
    </template>
  </div>
</template>

<script>
import { getListByPage } from './api'
import ScoreCard from './components/ScoreCard.vue'
import loadMoreMixin from '@/mixins/loadMoreMixin'

export default {
  components: {
    ScoreCard
  },
  mixins: [loadMoreMixin],
  data() {
    return {
      list: [],
      page: {
        page: 1,
        limit: 20
      }
    }
  },
  onLoad() {
    this.loadMore()
  },
  methods: {
    async loadMore() {
      this.loading = true
      const { list = [] } = await getListByPage(this.page)
      this.list = this.list.concat(this.formatScoreRecord(list))
      this.finished = list.length < this.page.limit
      this.loading = false
    },
    formatScoreRecord(list) {
      return list.map(item => {
        const { createTime, score, id, typeName } = item
        return {
          id,
          title: typeName || '其他',
          createTime,
          score
        }
      })
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
